import { withRouter } from 'next/router';
import Head from '@/components/Head';
import Tkd from '@/ssr/tkd';
// css
import styles from '@/styles/CommonList.module.scss';
// 组件
import Breadcrumb from '@/components/Breadcrumb';
import Pagination from '@/components/Pagination';
import SubNav from '@/pages_components/components/SubNav';
import ListItem from '@/pages_components/list/ListItem';
import HotProductPart from '@/pages_components/components/HotProductPart';
import Empty from '@/pages_components/list/Empty';
// ssr api
import { productList_SSR } from '@/ssr';

const pageType = '/guide';
const Guide = ({ list, total }) => {
    return (
        <div className={styles['common-list-page']}>
            {/* 标题/关键字/网页描述 */}
            <Head meta={Tkd[pageType]} />
            {/* 网页内容 */}
            <div className="max-content">
                {/* 面包屑 */}
                <Breadcrumb params={[ { name: '旅游攻略', url: `${pageType}/` } ]} />
                {/* 二级导航 */}
                <SubNav />
                <div className={styles.cnt}>
                    {/* 左侧 */}
                    <div className={styles['cnt-left']}>
                        {/* 列表 */}
                        <div className={[styles['pro-list'], styles['strategy']].join(' ')}>
                            {    
                                !list.length
                                ? <Empty />
                                : list.map(item => {
                                    return <ListItem target={pageType} targetUrl={`${pageType}/${item.id}.html`} data={item} key={item.id} />
                                })
                            }
                        </div>
                        {/* 分页 */}
                        <Pagination root={pageType} total={total} />
                    </div>
                    {/* 右侧，热门列表 */}
                    <div className={styles['cnt-right']}>
                        <HotProductPart product="热门景区" target="/ticket" />
                    </div>
                </div>
            </div>
        </div>
    )
}
// ssr 请求
Guide.getInitialProps = async (ctx) => {
    const { pathname, query } = ctx;
    const { 
        ssr: list, 
        total
    } = await productList_SSR(pageType, { pathname, query });
    return { list, total }
}

export default withRouter(Guide)